<template>
	<view class="footer">
		<view class="item juan">
			<view class="span">劵</view>
			<view class="amount">{{ticket}} <view class="zero">.{{zero}}</view></view>
		</view>
		
		<view class="my item" @tap="details">我的订单</view>
	</view>
</template>

<script>
	import {ticketShopBasic} from '@/api/mall.js'
	
	export default {
		data() {
			return {
				ticket: '',
				zero: ''
			};
		},
		created() {
			ticketShopBasic('').then(res => {
				if (res.status === 200) {
					this.ticket = res.data.ticket.toString().split('.')[0]
					this.zero = res.data.ticket.toString().split('.')[1]
				}
			})
		},
		methods: {
			details() {
				uni.navigateTo({
					url: '/mall/Ticket/IntegralOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #FFFFFF;
	left: 0;
	display: flex;
	align-items: center;
	
	.item {
		flex: 1;
		padding: 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		&.juan {
			&::before {
				position: absolute;
				content: '';
				height: 50%;
				width: 1rpx;
				background-color: #EEEEEE;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			.span {
				background-color: #FD7373;
				font-size: 22rpx;
				color: #FFFFFF;
				width: 35rpx;
				height: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 3px;
				margin-right: 15rpx;
			}
			.amount {
				display: flex;
				align-items: baseline;
				font-size: 32rpx;
				color: #FD7373;
				font-weight: bold;
				.zero {
					font-size: 28rpx;
					font-weight: normal;
				}
			}
		}
		
		&.my {
			color: #ccc;
			font-size: 32rpx;
		}
	}
}
</style>
